<template>
	<view class="this-day-ranking">
		<view class="bg-img">
			<view class="user-msg">
				<view>
					<image :src="avatarUrl"></image>
					<text>{{nickName}}</text>
				</view>
				<view class="answer-result">
					<view>
						十年寒窗苦读，恭喜你本次考取
						<text style="color:#FF4940;font-size: 28upx;" v-if="isRanking">“功名”</text>
						<text style="color:#FF4940;font-size: 28upx;" v-else>“{{user.grade}}”</text>
					</view>
					<view class="answer-result-grade">
						<view>
							<text>{{user.fraction}}</text>
							<text>得分</text>
						</view>
						<view class="line"></view>
						<view>
							<text>{{user.time}}</text>
							<text>用时</text>
						</view>
						<view class="line"></view>
						<view>
							<text>{{user.surpass}}</text>
							<text>超越人数</text>
						</view>
					</view>
				</view>
				<view class="test-friend">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share">
						快去考考你的朋友吧!
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button @click="open_share_tip">
						快去考考你的朋友吧!
					</button>
					<!-- #endif -->
					<view style="font-weight: 550;">
						邀请<text style="color: #FF3C00;">{{inviteNum}}位</text>好友考试，可以升级为队长
					</view>
				</view>
			</view>
			<view class="today-ranking" v-if="isRanking">
				<view>今日金榜排名放榜</view>
				<view class="today-ranking-count-down">
					放榜倒计时：
					<text>
						<text class="count-down">{{h}}</text>
						:
						<text class="count-down">{{f}}</text>
						:
						<text class="count-down">{{s}}</text>
					</text>
				</view>
				<view class="today-ranking-award">
					<view>
						<text>今日排名</text>
						<text>???</text>
					</view>
					<view>
						<text>本次奖励</text>
						<text>???</text>
					</view>
				</view>
			</view>
			<view class="today-ranking" v-else>
				<view>今日金榜排名放榜</view>
				<view class="congratulation-ranking">
					恭喜你，金榜题名
				</view>
				<view class="ranking-award">
					<view class="today-ranking-one">
						<text>今日排名</text>
						<text style="font-weight: 550;">{{user.rank}}<text style="font-size: 30upx;">名</text></text>
					</view>
					<view class="the-time-award">
						<view>本次奖励</view>
						<view class="the-award-specific">
							<view>
								<image :src="user.reward.prize_img"></image>
								<text>{{user.reward.prize}}</text>
							</view>
							<view style="margin-left: 10upx;">
								<image style="width:66upx;" :src="achievement_icon"></image>
								<text style="width: 92upx;">{{user.reward.achievement_value}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yesterday-ranking">
			<view class="yesterday-ranking-title" v-if="isRanking">
				昨日排名
			</view>
			<view class="twoTitle" v-else>
				<view :class="navIndex==2?'yesterday-ranking-title':'titleRight'"  @click="tapTopNav(2)">
					今日排名
				</view>
				<view :class="navIndex==1?'yesterday-ranking-title':'titleRight'" @click="tapTopNav(1)">
					昨日排名
				</view>
			</view>
			<view class="yesterday-ranking-text">
				<view>排名</view>
				<view>得分(分)</view>
				<view>用时(秒)</view>
				<view>奖励</view>
			</view>
			<view class="yesterday-ranking-user">
				<scroll-view scroll-y="true" v-if="list.length>=10" :style="'height:780px'" @scrolltolower="loadingMore">
					<view class="yesterday-ranking-person" v-for="(item,index) in list" :key="index">
						<view style="display: flex;padding-top: 6upx;box-sizing: border-box;">
							<view class="yesterday-ranking-msg" v-if="index==0">
								<image :src="num_one_icon"></image>
								<view style="color: #FFA500;">{{item.grade_name}}</view>
							</view>
							<view class="yesterday-ranking-msg" v-if="index==1">
								<image :src="num_teo_icon"></image>
								<view style="color: #999999;">{{item.grade_name}}</view>
							</view>
							<view class="yesterday-ranking-msg" v-if="index==2">
								<image :src="num_three_icon"></image>
								<view style="color: #A35F04;">{{item.grade_name}}</view>
							</view>
							<view class="yesterday-ranking-msg" v-if="index>2">
								<view class="ranking-num">
									{{index+1}}
								</view>
							</view>
							<view class="yesterday-ranking-msg-user" style="margin-left: 26upx;">
								<image :src="item.avatar"></image>
								<text>{{item.nickname | goodName_val}}</text>
							</view>
						</view>
						<view>{{item.fraction}}</view>
						<view>{{item.time}}</view>
						<view class="yesterday-ranking-award">
							<view>
								<image :src="item.reward.prize_img"></image>
								<text>{{item.reward.prize}}</text>
							</view>
							<view style="margin-left: 10upx;">
								<image style="width:66upx;" :src="achievement_icon"></image>
								<text style="width: 90upx;">{{item.reward.achievement_value}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 少于10项 -->
				<view class="yesterday-ranking-person" v-for="(item,index) in list" :key="index" v-else>
					<view style="display: flex;padding-top: 6upx;box-sizing: border-box;">
						<view class="yesterday-ranking-msg" v-if="index==0">
							<image :src="num_one_icon"></image>
							<view style="color: #FFA500;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index==1">
							<image :src="num_teo_icon"></image>
							<view style="color: #999999;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index==2">
							<image :src="num_three_icon"></image>
							<view style="color: #A35F04;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index>2">
							<view class="ranking-num">
								{{index+1}}
							</view>
						</view>
						<view class="yesterday-ranking-msg-user" style="margin-left: 26upx;">
							<image :src="item.avatar"></image>
							<text>{{item.nickname | goodName_val}}</text>
						</view>
					</view>
					<view>{{item.fraction}}</view>
					<view>{{item.time}}</view>
					<view class="yesterday-ranking-award">
						<view>
							<image :src="item.reward.prize_img"></image>
							<text>{{item.reward.prize}}</text>
						</view>
						<view style="margin-left: 10upx;">
							<image style="width:66upx;" :src="achievement_icon"></image>
							<text style="width: 90upx;">{{item.reward.achievement_value}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
		<ending v-if="page>last_page||page==1"></ending>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ending from '../../../../common/ending.vue'
	import {MinAndSec} from '@/common/util.js'
	export default{
		components: { uniPopup,ending },
		onShareAppMessage(res) {
			if(this.$store.getters.getToken) {
				let data = {
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.add_jin_share(data).then(res=>{
					console.log('记录分享',res)
				}).catch(err => {
					console.log('记录分享',err)
				})
				return {
					title: this.shareData.share_copy,
					path: '/pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1',
					imageUrl: this.shareData.img_src,
				}
			}
		},
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 3) {
					return value.slice(0, 3) + '...'
				}
				return value
			}
		},
		data(){
			return{
				inviteNum: this.$store.getters.getNum,
				isRanking: true,//正在倒计时？
				navIndex: 1,
				list: [],
				last_page: 1,
				page: 1,
				user: {
					fraction: 0,
					grade: '',
					num: 0,
					rank: 1,
					reward: [],
					surpass: 0,
					time: 0
				},
				h: '00',
				f: '00',
				s: '00',
				timeId: null,
				nickName: '',
				avatarUrl: '',
				achievement_icon: this.$store.state.imgUrl + 'img/nominate/achievement-icon.png',
				num_one_icon: this.$store.state.imgUrl + 'img/nominate/num_one_icon.png',
				num_teo_icon: this.$store.state.imgUrl + 'img/nominate/num_teo_icon.png',
				num_three_icon: this.$store.state.imgUrl + 'img/nominate/num_three_icon.png',
				shareData: {}
			}
		},
		onLoad() {
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
					this.nickName = res.nickName
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.nickName = this.$store.state.nickName
				this.avatarUrl = this.$store.state.avatarUrl
			}
		},
		onShow() {
			this.getShareInfo()
			this.getData()
			this.H5share()
		},
		onHide() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		onUnload() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		methods: {
			getShareInfo() {
				let data ={
					token: this.$store.getters.getToken,
					isNoNeedLoading: true
				}
				this.$api.get_challenge_info(data).then(res=>{
					if(res.status) {
						this.shareData=res.data
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取信息',res)
				}).catch(err=>{
					console.log('获取信息',err)
				})
			},
			tapTopNav(index) {
				this.navIndex=index
				this.getData()
			},
			getTime(time) {
				this.timeId =setInterval(()=>{
					if(time<=0) {
						this.isRanking = false
					}else {
						this.isRanking = true
						var hours = Math.floor((time % (60 * 60 * 24)) / (60 * 60));
						var minutes = Math.floor((time % (60 * 60)) / (60));
						var seconds = Math.floor(time % (60));
						this.h = hours>=10?hours:'0'+hours;
						this.f = minutes>=10?minutes:'0'+minutes;
						this.s = seconds>=10?seconds:'0'+seconds;
						time = time-1
					}
				},1000)
			},
			getData() {
				this.list = []
				this.page = 1
				this.last_page = 1
				let data = {
					token: this.$store.getters.getToken,
					is_yesterday: this.navIndex,//1查昨天  2查今天
					page: this.page,
					pagesize: 10
				}
				this.$api.goldLeaderBoard(data).then(res => {
					if(res.status) {
						this.user = res.user
						this.user.time = MinAndSec(this.user.time)
						this.getTime(res.time)
						this.list = res.list.data
						this.last_page = res.list.last_page
						
						
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取今日排行榜数据',res)
				}).catch(err => {
					console.log('获取今日排行榜数据',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.$store.getters.getToken,
						is_yesterday: this.navIndex,//1查昨天  2查今天
						page: this.page,
						pagesize: 10
					}
					this.$api.goldLeaderBoard(data).then(res => {
						if(res.status) {
							this.list = this.list.concat(res.list.data) 
							this.last_page = res.list.last_page
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						console.log('获取今日排行榜数据',res)
					}).catch(err => {
						console.log('获取今日排行榜数据',err)
					})
				}
			},
			H5share(){
				if(this.$store.getters.getToken) {
					let data = {
						token: this.$store.getters.getToken,
						isNoNeedLoading: true
					}
					this.$api.add_jin_share(data).then(res=>{
						console.log('记录分享',res)
					}).catch(err => {
						console.log('记录分享',err)
					})
				}
				let link=this.$store.state.H5URL+'pages/home/topNominate/topNominate?share_id=' + this.$store.getters.getUserId+'&fromJin=1'
				let share_detail = '这是金榜题名排行榜快去考考你的朋友的分享详情'
				this.share(this.shareData.share_copy,share_detail, this.shareData.img_src,link=link)
			},
			open_share_tip(){

				console.log(this.$refs,'this.$refs')
				this.$refs.shareTip.open();
			}
		}
	}
</script>

<style scoped>
	.twoTitle {
		width: 364upx;
		height: 64upx;
		display: flex;
		background-color: #F2F2F4;
		border-radius: 0 40upx 40upx 0;
	}
	.titleRight {
		width: 182upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #666;
	}
	/* 放榜后 */
	.congratulation-ranking{
		text-align: center;
		color: #FF5C46;
		font-size: 24upx;
		margin-top: 24upx;
		font-weight: 550;
	}
	.ranking-award{
		width: 100%;
		height: 182upx;
		/* background: #F7F9FC; */
		border-radius: 2upx;
		margin-top: 20upx;
		padding: 20upx 76upx 20upx 112upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.ranking-award image{
		width: 90upx;
		height: 68upx;
		border-top-left-radius: 4upx;
		border-top-right-radius: 4upx;
	}
	.today-ranking-one>text{
		display: block;
	}
	.today-ranking-one>text:first-child{
		color: #666666;
		font-size: 26upx;
	}
	.today-ranking-one>text:last-child{
		color: #FF5C46;
		font-size: 44upx;
		margin-top: 22upx;
	}
	.the-time-award>view{
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.the-award-specific{
		display: flex;
		margin-top: 6upx;
	}
	.the-award-specific>view{
		/* background: #D9F2E9; */
		border-radius: 4upx;
	}
	.the-award-specific>view:last-child{
		margin-left: 10upx;
	}
	.the-award-specific text{
		display: block;
		height: 32upx;
		color: #666666;
		font-size: 24upx;
		text-align: center;
		/* line-height: 32upx; */
	}
	page{
		position: relative;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.this-day-ranking{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.bg-img{
		width: 100%;
		height: 972upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/nominate/ranking_list_after.png);
		background-size: 100% 100%;
		padding-top: 196upx;
		box-sizing: border-box;
	}
	.user-msg{
		width: 690upx;
		height: 524upx;
		background: #FFFFFF;
		border-radius: 16upx;
		margin: 0 auto;
		box-shadow: 0 4upx 22upx 0 rgba(110, 0, 0, 0.23);
		padding: 20upx;
		box-sizing: border-box;
	}
	.user-msg image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.user-msg>view:first-child>text{
		display: inline-block;
		vertical-align: middle;
		color: #333333;
		font-size: 30upx;
		margin-left: 20upx;
	}
	.answer-result {
		width: 100%;
		margin-top: 30upx;
	}
	.answer-result > view:first-child {
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: rgba(255, 73, 64, 0.1);
		border-radius: 23upx;
		font-size: 24upx;
		color: #666666;
	}
	.answer-result-grade {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding-top: 38upx;
		box-sizing: border-box;
	}
	.answer-result-grade > view > text {
		display: block;
	}
	.answer-result-grade > view > text:first-child {
		color: #333333;
		font-size: 36upx;
		line-height: 50upx;
		font-weight: 550;
	}
	.answer-result-grade > view > text:last-child {
		font-size: 24upx;
		color: #999999;
		line-height: 34upx;
	}
	.answer-result-grade > view:first-child {
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.answer-result-grade > view:last-child {
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.line {
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #efefef;
		margin-top: 20upx;
	}
	.test-friend{
		margin-top: 60upx;
		text-align: center;
	}
	.test-friend>button{
		font-size: 30upx;
		width: 430upx;
		line-height: 80upx;
		height: 80upx;
		color: #FFFFFF;
		background: linear-gradient(#CBEC00,#00A66A);
		border-radius: 40upx;
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		margin: 0 auto;
	}
	.test-friend>view:last-child{
		font-size: 24upx;
		color: rgba(0, 166, 106, 0.8);
		margin-top: 20upx;
	}
	.today-ranking{
		width: 690upx;
		height: 326upx;
		margin:  0 auto;
		margin-top: 20upx;
		border-radius: 16upx;
		box-shadow: 0 4upx 22upx 0 rgba(110, 0, 0, 0.23);
		background: #FFFFFF;
		padding-top: 55upx;
		box-sizing: border-box;
		position: relative;
	}
	.today-ranking>view:first-child{
		width: 344upx;
		height: 60upx;
		background: url(https://lightplanet.tuanhaoke.cn/img/riddle/puzzle_bg_img.png);
		background-size: 100% 100%;
		position: absolute;
		top: -4upx;left: 50%;
		transform: translate(-50%,0);
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
	}
	.today-ranking-count-down{
		color: #999999;
		font-size: 20upx;
		margin-top: 24upx;
		text-align: center;
	}
	.today-ranking-count-down>text{
		color: #FF5C46;
	}
	.today-ranking-count-down .count-down{
		display: inline-block;
		width: 34upx;height: 28upx;
		line-height: 28upx;
		background: #FFE3E3;
		border-radius: 2upx;
		margin: 0 10upx;
	}
	.today-ranking-award{
		display: flex;
		justify-content: space-between;
		margin-top: 36upx;
		margin-left: 110upx;
		margin-right: 122upx;
	}
	.today-ranking-award image{
		width: 90upx;
		height: 68upx;
	}
	.today-ranking-award>view>text{
		display: block;
		text-align: center;
	}
	.today-ranking-award>view>text:first-child{
		color: #666666;
		font-size: 26upx;
	}
	.today-ranking-award>view>text:last-child{
		color: #FF5C46;
		font-size: 44upx;
		margin-top: 28upx;
		color: #FF5C46;
	}
	.yesterday-ranking{
		width: 100%;
		background: #FFFFFF;
		margin-top: 136upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.yesterday-ranking-title{
		width: 182upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 0 40upx 40upx 0;
		background: linear-gradient(to right,#4CCB31,#00B574);
	}
	.yesterday-ranking-text{
		width: 100%;
		height: 88upx;
		background: #E8E8E8;
		color: #333333;
		font-size: 28upx;
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-top: 30upx;
	}
	.yesterday-ranking-text>view{
		width: 56upx;
		position: relative;
	}
	.yesterday-ranking-text>view:nth-child(1){
		line-height: 88upx;
	}
	.yesterday-ranking-text>view:nth-child(2){
		margin-top: 6upx;
		position: absolute;
		left: 352upx;
	}
	.yesterday-ranking-text>view:nth-child(3){
		margin-top: 6upx;
		position: absolute;
		left: 456upx;
	}
	.yesterday-ranking-text>view:nth-child(4){
		line-height: 88upx;
		position: absolute;
		right: 55upx;
	}
	.yesterday-ranking-user{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.yesterday-ranking-msg>image{
		width: 30upx;
		height: 28upx;
	}
	.yesterday-ranking-msg>view{
		font-size: 28upx;
	}
	.yesterday-ranking-person{
		text-align: center;
		padding: 28upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.yesterday-ranking-msg-user>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.yesterday-ranking-msg-user>text{
		display: inline-block;
		margin-left: 10upx;
		color: #333333;
		font-size: 30upx;
		vertical-align: middle;
		width: 130upx;
	}
	.yesterday-ranking-person>view:nth-child(2){
		width: 70upx;
		margin-left: 10upx;
		color: #666666;
		font-size: 28upx;
		line-height: 90upx;
	}
	.yesterday-ranking-person>view:nth-child(3){
		text-align: right;
		width: 88upx;
		color: #666666;
		font-size: 28upx;
		line-height: 90upx;
	}
	.yesterday-ranking-award{
		display: flex;
	}
	.yesterday-ranking-award>view{
		border-radius: 4upx;
		height: 100upx;
		margin-left: 30upx;
	}
	.yesterday-ranking-award>view:last-child{
		/* background: #D9F2E9; */
	}
	.yesterday-ranking-award>view>text{
		display: block;
		/* width: 90upx; */
		/* line-height: 18upx; */
		color: #666666;
		font-size: 24upx;
	}
	.yesterday-ranking-award>view>image{
		width: 90upx;
		height: 66upx;
		border-radius: 4upx 4upx 0 0; 
	}
	.ranking-num{
		width: 56upx;
		height: 32upx;
		line-height: 32upx;
		background: #DEDEDE;
		text-align: center;
		color: #333333;
		font-size: 28upx;
		margin-top: 28upx;
		border-radius: 16upx;
	}
	
	/* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
